<template>
  <div>
    <ul v-for="number in group" :key="number">
      <div style="text-align: left;box-sizing: content-box;border: 10px;margin: 20px;padding: 20px;">{{ number }}</div>
      <li v-for="city in cities[number]" :key="city.id" style="list-style: none;display: block">
        {{ city.name }} ---- ({{ city.area_code }})
      </li>
    </ul>
  </div>
</template>

<script>
import {cityList} from "@/api/common_api";

export default {
  name: "HomeCity",
  data() {
    return {cities: {}, group: []}
  },
  created() {
    this.fetchCity();
  },
  methods: {
    async fetchCity() {
      const result = await cityList("group");
      console.log(result.data);
      this.group = Object.keys(result.data).sort();
      console.log("分组序号:" + this.group);
      this.cities = result.data;
    }
  },
}
</script>

<style scoped>

</style>